<template>
  <div>
    <Table :lists="list" :column="col">
      <template v-slot:level="{ row: { level } }">
        <el-tag :type="colors[level]">{{ levels[level] }}级</el-tag>
      </template>
    </Table>
  </div>
</template>

<script>
// import Table from "@/components/Table.vue";
import api from "@/http/roles.js";
import { reactive, onMounted, toRefs } from "vue";
export default {
  name: "rights",
  // components: { Table },
  setup() {
    const state = reactive({
      levels: ["一", "二", "三"],
      colors: ["", "success", "warning"],
      list: [],
      /**
       * 表格配置项
       */
      col: [
        {
          type: "index",
          label: "#",
        },
        {
          prop: "authName",
          label: "权限名称",
        },
        {
          prop: "path",
          label: "路径",
        },
        {
          label: "等级",
          slot: "level",
        },
      ],
    });

    let getList = async () => {
      const res = await api.RightsList();
      console.log(res.data);
      if (res.meta.status == 200) {
        state.list = res.data;
        console.log(state.list, "权限");
      }
    };

    onMounted(() => {
      getList();
    });

    return {
      ...toRefs(state),
      getList, //获取数据
    };
  },
};
</script>

<style lang="scss" scoped>
</style>